// pages/haibao/haibao.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    evalatImage:'',
    bgBanner:'',
    imagePath:"",
    maskHidden:false,
    qrcode_image:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
 
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
  /**
   * 生命周期函数--监听页面显示
   */
  async onShow() {
    let  that = this;
    let jpgurl = 'cloud://serverace-4g404vuyeda33e17.7365-serverace-4g404vuyeda33e17-1308232720/gdbg.jpg' // https://pan.gcable.tv/seafhttp/files/7c6f2c32-250a-4998-8fc3-c02970de773d/share_bg.jpg
    wx.getImageInfo({
      src: jpgurl,
      success(res) {
        console.log("海报底部背景:" + res.path);
        that.setData({
          bgBanner: res.path
        })
      }
    })
    let qr_image = await that.create_qrcode_image({ worker:'周纪峰', uuid:'zhoujifeng-总部中-装维工程师' })
    wx.getImageInfo({
      src: qr_image,
      success:(res)=> {       
        this.setData({
          qrcode_image: res.path
        })  }
    }) 
  // wx.getImageInfo({  //   src: jpgurl,  //   success(res) {
        //     console.log("banner临时路径:" + res.path); //     that.setData({   //       evalatImage: res.path //     }) //   } // })
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      return {
          title: "江门广电网络优质服务评选",
          path: 'pages/index/index?option=default&area=总部中区'
        }
    }
      return {
        title: "江门广电网络优质服务评选",
        path: 'pages/index/index?option=default&area=总部中区'
      }
  },
  //新版点击生成海报
  async bannerCreate(){
    this.creatingBanner() // 提前获取
    // 非员工扫码进来专属页面写法，即时获取
    // let qr_image = await this.create_qrcode_image({ worker:'周纪峰', uuid:'zhoujifeng-总部中-装维工程师' })
    // wx.getImageInfo({
    //   src: qr_image,
    //   success:(res)=> {
    //     console.log("X二维码:" + res.path);
    //     this.setData({
    //       qrcode_image: res.path
    //     },()=>{
    //       // this.creatingBanner()
    //     })
    //   }
    // }) 

  },
  creatingBanner(){
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
    .fields({
        node: true,
        size: true  })
    .exec((res)=>{
        const { node } = res[0]
        if (!node) return
        /* 获取 canvas 实例 */
        const context = node.getContext('2d')     
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取dpi 动态缩放
        node.width = res[0].width * dpr
        node.height = res[0].height * dpr
        context.scale(dpr, dpr)
        context.fillStyle = 'lightcyan'
        const image = node.createImage()
        image.src = this.data.bgBanner // bgggggg
        image.onload = () => {
          context.drawImage(image,0,0,1280,1641,0,0,445,559)
          const image2 = node.createImage()
          console.log('aaaaa',this.data.qrcode_image)
          image2.src = this.data.qrcode_image // qrcode
          image2.onload = () => {
            context.drawImage(image2,0,0,430,430,278,463,92,92)
            /* 设置字体样式 大小 字体类别 */
            context.font = 'normal 500 34px stxinwei',
            context.fillText('周纪锋  装维工程师', 5, 460)  
                //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    let that = this
    setTimeout(function () {
      let mycanvas = that.selectComponent('#myCanvas')
      wx.canvasToTempFilePath({
        canvas: node,
        success: function (res) {
          console.log(1222222222)
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 1000);   
          }
        }
        // qrcode_image
      })
  },
  //点击生成海报
  formSubmit: function (e) {
    var that = this;
    wx.showToast({
      title: '海报生成中...',
      icon: 'loading',
      duration: 1000
    });
    that.createNewImg();
    setTimeout(function () {
      wx.hideToast()
      that.setData({
        maskHidden: true
      });
    }, 1000);
  },
  //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
  createNewImg: function () {
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    context.clearRect(0, 0, 375, 660);
    context.setFillStyle("#fff")
    context.fillRect(0, 0, 375, 660)
    context.save();
 
    // var path = that.data.evalatImage;
    // context.drawImage(path, 0, 0, 375, 183);
 
 
    var path1 = that.data.bgBanner;  // 绘制主图 bgBanner背景路径属性
    console.log("海报底部背景图" + path1);
    var path2 = that.data.qrcode_image;
    console.log("海报底部二维码" + path2); //
    context.setFontSize(16);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("测试结果", 60, 230);
    context.stroke();
    context.save();
 
 
 
    context.setFontSize(16);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.fillText("测试说明", 60, 320);
    context.stroke();
    context.save();
    context.drawImage(path1, 0, 0, 445, 549); // 广电背景图 532*809 
 
    var results = "张工程师";
 
    // 测试结果说明
    that.dealWords({
      ctx: context,                     //画布上下文 canvasID
      fontSize: 26,                //字体大小
      word: results,                  //需要处理的文字
      maxWidth: 390,             //一行文字最大宽度
      x: 20,                    //文字在x轴要显示的位置
      y: 340,                      //文字在y轴要显示的位置
      maxLine: 6              //文字最多显示的行数
    });
    context.stroke();
    context.save(); //保存之前的画布设置

    var titl = "广电";
    context.setFontSize(18);
    context.setFillStyle('#333');
    context.setTextAlign('left');
    context.font = 'normal bold 18px sans-serif';
    context.fillText(titl, 60, 270);
    context.stroke();
    context.save();
 
    //绘制头像
    // context.beginPath();
    // context.arc(50, 225, 5, 0, 2 * Math.PI);
    // context.setStrokeStyle("#c7eddd");
    // context.setFillStyle("#44bf8c");
    // context.clip(); //裁剪上面的圆形
    // context.fill();//填充
    // context.restore();//因为clip是剪切了画布  则后面所有的操作都会限制在被裁减的区域内可见  用restore可以恢复之前的设置
    // context.closePath();
 
    context.save(); //保存之前的画布设置
    context.beginPath();
    context.arc(50, 315, 5, 0, 2 * Math.PI);
    context.setStrokeStyle("#c7eddd");
    context.setFillStyle("#44bf8c");
    context.clip(); //裁剪上面的圆形
    context.fill();//填充
    context.restore();
    context.closePath();
    // ****************绘制二维码**********************
    context.save(); //保存之前的画布设置
    context.beginPath();
    context.arc(55, 610, 50, 0, 2 * Math.PI);
    context.setStrokeStyle("#ffe200");
    context.clip(); //裁剪上面的圆形
    context.drawImage(path2, 5, 60, 100, 100);
    context.restore();
    context.closePath();
 
    context.save(); //保存之前的画布设置
    context.beginPath();
    // context.setFontSize(16);
    context.setFillStyle('#fff');
    context.setTextBaseline("top");
    context.setTextAlign('left');
    // context.font = 'normal 18px arial';
    // context.fillText("预防疫情四大宅家心理健康测评", 115, 565);
    // context.fillText("预防疫情四大宅家心理健康测评", 115, 589);
    that.dealWords({
      ctx: context,                     //画布上下文 canvasID
      fontSize: 36,                //字体大小
      word: titl,                 //需要处理的文字
      maxWidth: 340,             //一行文字最大宽度
      x: 215,                   //文字在x轴要显示的位置
      y: 540,                      //文字在y轴要显示的位置
      maxLine: 2              //文字最多显示的行数
    });
    context.stroke();
    context.closePath();
    context.save(); //保存之前的画布设置
    context.draw(true);//true表示保留之前绘制内容
 
 
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 1000);
  },
  //文本换行
  dealWords(options) {
    options.ctx.setFontSize(options.fontSize);//设置字体大小
    var allRow = Math.ceil(options.ctx.measureText(options.word).width / options.maxWidth);//实际总共能分多少行
    var count = allRow >= options.maxLine ? options.maxLine : allRow;//实际能分多少行与设置的最大显示行数比，谁小就用谁做循环次数
 
    var endPos = 0;//当前字符串的截断点
    for (var j = 0; j < count; j++) {
      var nowStr = options.word.slice(endPos);//当前剩余的字符串
      var rowWid = 0;//每一行当前宽度    
      if (options.ctx.measureText(nowStr).width > options.maxWidth) {//如果当前的字符串宽度大于最大宽度，然后开始截取
        for (var m = 0; m < nowStr.length; m++) {
          rowWid += options.ctx.measureText(nowStr[m]).width;//当前字符串总宽度
          if (rowWid > options.maxWidth) {
            if (j === options.maxLine - 1) { //如果是最后一行
              options.ctx.fillText(nowStr.slice(0, m - 1) + '...', options.x, options.y + (j + 1) * 25);    //(j+1)*20这是每一行的高度        
            } else {
              options.ctx.fillText(nowStr.slice(0, m), options.x, options.y + (j + 1) * 25);
            }
            endPos += m;//下次截断点
            break;
          }
        }
      } else {//如果当前的字符串宽度小于最大宽度就直接输出
        options.ctx.fillText(nowStr.slice(0), options.x, options.y + (j + 1) * 25);
      }
    }
  },
  //点击保存到相册
  baocun: function () {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.imagePath,
      success(res) {
        wx.showModal({
          content: '图片已保存到相册，赶紧晒一下吧~',
          showCancel: false,
          confirmText: '好的',
          confirmColor: '#333',
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
              /* 该隐藏的隐藏 */
              that.setData({
                maskHidden: false
              })
            }
          }, fail: function (res) {
            console.log(11111)
          }
        })
      }
    })
  },
  async create_qrcode_image(data) {
    let callcloud = await wx.cloud.callFunction({
      name:'qrcode',
      data:{
        worker: data.worker, //data.worker 周纪峰
        uuid: data.uuid // data.uuid zhoujifeng-总部中-装维工程师
      } })
    console.log('ASYNC ', callcloud)
    return callcloud.result
  }
})





